
var oDiv1, oDiv2, oMouse
document.onmousemove = function(event) {
        oDiv1 = document.getElementById('d1')
        oMouse = document.getElementById('mouse')
        oDiv2 = document.getElementById('d2')
        //出现大图
        oDiv2.style.display = 'block'
        //获取鼠标框的x和y
        oMouse.style.left = event.clientX - oMouse.offsetWidth / 2 + 'px'
        oMouse.style.top = event.clientY - oMouse.offsetHeight / 2 + 'px'
        var l = oMouse.offsetLeft //左
        var t = oMouse.offsetTop //上
        if (l < oDiv1.offsetLeft) { //判断左右
            l = oDiv1.offsetLeft
        } else if (l > oDiv1.offsetWidth - oMouse.offsetWidth + oDiv1.offsetLeft) {
            l = oDiv1.offsetWidth - oMouse.offsetWidth + oDiv1.offsetLeft
        }
        if (t < oDiv1.offsetTop) { //判断上下
            t = oDiv1.offsetTop
        } else if (t > oDiv1.offsetHeight - oMouse.offsetHeight + oDiv1.offsetTop) {
            t = oDiv1.offsetHeight - oMouse.offsetHeight + oDiv1.offsetTop
        }
        oMouse.style.left = l + 'px'
        oMouse.style.top = t + 'px'
        //大图移动
        oDiv2.style.backgroundPositionX = -3 * l + 'px'
        oDiv2.style.backgroundPositionY = -3 * t + 'px'
        //大图消失
        if (event.clientX > oDiv1.offsetWidth) {
            oDiv2.style.display = 'none'
        } else if (event.clientY > oDiv1.offsetHeight) {
            oDiv2.style.display = 'none'
        }

    }
